// app/TabViewExample.js
import React, { useState } from 'react';
import { View, Text, StyleSheet } from 'react-native';
import { TabView, SceneMap, TabBar } from 'react-native-tab-view';

const FirstRoute = () => (
    <View style={styles.scene}>
        <Text>First Tab</Text>
    </View>
);

const SecondRoute = () => (
    <View style={styles.scene}>
        <Text>Second Tab</Text>
    </View>
);

const TabViewExample = () => {
    const [index, setIndex] = useState(0);
    const [routes] = useState([
        { key: 'first', title: 'Tab 1' },
        { key: 'second', title: 'Tab 2' },
    ]);

    const renderScene = SceneMap({
        first: FirstRoute,
        second: SecondRoute,
    });

    const renderTabBar = props => (
        <TabBar
            {...props}
            style={styles.tabBar}
            indicatorStyle={styles.indicator}
            renderLabel={({ route, focused }) => (
                <Text style={{ color: focused ? 'orange' : 'black' }}>{route.title}</Text>
            )}
        />
    );

    return (
        <TabView
            navigationState={{ index, routes }}
            renderScene={renderScene}
            onIndexChange={setIndex}
            initialLayout={{ width: 300 }}
            renderTabBar={renderTabBar}
        />
    );
};

const styles = StyleSheet.create({
    scene: {
        flex: 1,
        justifyContent: 'center',
        alignItems: 'center',
    },
    tabBar: {
        backgroundColor: 'white',
    },
    indicator: {
        backgroundColor: 'orange',
    },
});

export default TabViewExample;